<!--
  * 捐赠方统计
  *
-->
<template>
    <!---------- 查询表单form begin ----------->
    <a-form class="smart-query-form">
        <a-row class="smart-query-form-row">
            <a-form-item label="年份选择" class="smart-query-form-item">
                <a-date-picker :valueFormat="'YYYY'" :allowClear="false" style="width: 200px" :defaultValue="null"
                    v-model:value="queryForm.key" picker="year" placeholder="请选择年份息" />
            </a-form-item>
            <a-form-item label="关系选择" class="smart-query-form-item">
                <a-select v-model:value="queryForm.key1" style="width: 200px" placeholder="请选择关系" :allowClear="true"
                    size="Middle" @change="changeProStatus">
                    <a-select-option value="0">校友</a-select-option>
                    <a-select-option value="1">非校友</a-select-option>
                    <a-select-option value="2">校友企业</a-select-option>
                    <a-select-option value="3">非校友企业</a-select-option>
                    <a-select-option value="4">社会团体</a-select-option>
                    <a-select-option value="5">其它</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="省份选择" class="smart-query-form-item">
                <a-select v-model:value="queryForm.key2" style="width: 200px" :allowClear="false" placeholder="请选择省份">
                    <a-select-option :value="item" v-for="item in province">{{ item }}</a-select-option>
                </a-select>
            </a-form-item>
        </a-row>
        <a-row style="margin-top: 12px">
            <a-form-item class="smart-query-form-item">
                <a-button type="primary" @click="queryData('1')">
                    <template #icon>
                        <SearchOutlined />
                    </template>
                    查询
                </a-button>
                <a-button @click="resetQuery" class="smart-margin-left10">
                    <template #icon>
                        <ReloadOutlined />
                    </template>
                    重置
                </a-button>
            </a-form-item>
        </a-row>
    </a-form>
    <!---------- 查询表单form end ----------->

    <a-card size="small" :bordered="false" :hoverable="true">
        <!---------- 表格操作行 begin ----------->
        <a-row class="smart-table-btn-block">
            <div class="smart-table-operate-block" style="width: 90%;">
                <a-button type="primary" @click="down" :loading="iconLoading">
                    <template #icon>
                        <UsbOutlined />
                    </template>
                    导出所有
                </a-button>
            </div>
            <span class="smart-table-column-operate">
                <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.SYSTEM.EMPLOYEE" :refresh="queryData" />
            </span>
        </a-row>

        <!---------- 表格 begin ----------->
        <a-table size="small" :dataSource="tableData" :columns="columns" rowKey="blfunduseid" bordered
            :loading="tableLoading" :pagination="false" :scroll="{ x: 1500}">
        </a-table>
        <!---------- 表格 end ----------->
        <!-- 分页-->
        <div class="smart-query-table-page">
            <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
                :defaultPageSize="queryForm.limit" v-model:current="queryForm.page" v-model:pageSize="queryForm.limit"
                :total="total" @change="queryData" @showSizeChange="queryData" :show-total="(total) => `共${total}条`" />
        </div>

    </a-card>
</template>
<script setup>
    import { reactive, ref, onMounted } from 'vue';
    import { message, Modal } from 'ant-design-vue';
    import { SmartLoading } from '/@/components/framework/smart-loading';
    import { getStatisticsApi } from '/@/api/infoStatistics/infoStatistics-api';
    import { DonaInfoApi } from '/@/api/basicManage/DonationManage/DonaInfo-api';
    import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
    import { smartSentry } from '/@/lib/smart-sentry';
    import _ from 'lodash';
    import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
    import TableOperator from '/@/components/support/table-operator/index.vue';
    import pcaa from 'china-area-data';
    // ---------------------------- 表格列 ----------------------------

    const columns = ref([
        {
            title: '捐赠方名称',
            dataIndex: 'bldonor',
            align: 'center',
            fixed: 'left',
        },
        {
            title: '省份',
            dataIndex: 'blprovince',
            align: 'center',
        },
        {
            title: '电话',
            dataIndex: 'blphone',
            align: 'center',
        },
        {
            title: '邮箱',
            dataIndex: 'blemail',
            align: 'center',
        },
        {
            title: '捐赠方情况说明',
            dataIndex: 'bldescription',
            align: 'center',
        },
    ]);
    // 按钮加载loading
    const iconLoading = ref(false);
    // ====== 导出============= 
    async function down() {
        iconLoading.value = true;
        try {
            let queryResult = await getStatisticsApi.exportDonorList();
            // 创建a标签
            const link = document.createElement('a')
            const url = window.URL.createObjectURL(new Blob([queryResult.data]))
            // 指定下载链接
            link.href = url
            // 指定下载文件名
            link.download = '捐赠方信息统计.xlsx'
            // 把a标签加到页面中
            document.body.appendChild(link)
            // 触发a标签下载
            link.click()
            // 下载完成移除元素
            document.body.removeChild(link)
            // 释放掉blob对象
            window.URL.revokeObjectURL(url)
            message.success(`导出成功！`)
        } catch (e) {
            smartSentry.captureError(e);
        } finally {
            iconLoading.value = false;
        }
    }
    // 选择关系
    const changeProStatus = (value) => {
        queryForm.key1 = value
    }
    const province = ref();//省份
    // 省
    // function getProvince() {
    //     let arr = []
    //     const provinceData = pcaa['86']
    //     Object.keys(provinceData).forEach((item) => {
    //         arr.push({ label: provinceData[item], value: item })
    //     })
    //     return arr
    // }
    async function getProvince() {
        try {
            let res = await DonaInfoApi.ChinaFind();
            province.value = res.data;
        } catch (error) {
            smartSentry.captureError(error);
        }
    }
    // ---------------------------- 查询数据表单和方法 ----------------------------
    const queryFormState = {
        key: undefined,//年份
        key1: undefined,//关系选择
        key2: undefined,//省份
        page: 1,
        limit: PAGE_SIZE,
    };
    // 查询表单form
    const queryForm = reactive({ ...queryFormState });
    // 表格加载loading
    const tableLoading = ref(false);
    // 表格数据
    const tableData = ref([]);
    // 总数
    const total = ref(0);

    // 重置查询条件
    function resetQuery() {
        let pageSize = queryForm.limit;
        Object.assign(queryForm, queryFormState);
        queryForm.limit = pageSize;
        queryData();
        searchPage.value = false
    }
    const searchPage = ref(false)//检索的翻页
    // 查询数据
    async function queryData(a) {
        tableLoading.value = true;
        try {
            if (a === '1') {
                queryForm.page = 1;
                searchPage.value = true
            }
            if (!searchPage.value) {
                queryForm.key = undefined;
                queryForm.key1 = undefined;
                queryForm.key2 = undefined;
            }
            let queryResult = await getStatisticsApi.getDonorList(queryForm);
            tableData.value = queryResult.data.list;
            total.value = queryResult.data.totalCount;
        } catch (e) {
            smartSentry.captureError(e);
        } finally {
            tableLoading.value = false;
        }
    }
    onMounted(() => {
        queryData();
        getProvince();
    })


</script>